<template>
  <a-card class="body-container">
    <a-row justify="end">
      <a-col :span="12"
        ><a-button-group style="float: right; margin-bottom: 10px">
          <s-button
            @click="
              () => {
                $parent.openList()
              }
            "
            ><s-icon type="left-outlined" />返回</s-button
          >
          <s-button type="primary" @click="save"> <s-icon type="save-outlined" />保存 </s-button>
        </a-button-group></a-col
      >
    </a-row>
    <s-form
      ref="form"
      :value="formValue"
      body-style="width:100%;height:100%"
      style="height: 100%; width: 100%"
    >
      <s-tabs style="width: 100%; height: 100%" class="property-panel">
        <a-tab-pane key="0" tab="基础属性">
          <s-scroll>
            <a-row>
              <s-form-item
                label="接口名称"
                size="small"
                name="name"
                :colon="true"
                :display-title="true"
                :rules="[
                  { whitespace: true, required: true, message: '接口名称不能为空' },
                  { max: 50, message: '最长为50位' }
                ]"
              >
                <s-input
                  v-model="formValue.name"
                  :allow-clear="true"
                  placeholder="请输入接口名称"
                />
              </s-form-item>
              <s-form-item
                label="接口类型"
                size="small"
                name="type"
                :colon="true"
                :display-title="true"
                :rules="[{ whitespace: true, required: true, message: '接口类型不能为空' }]"
              >
                <s-select
                  v-model="formValue.type"
                  :allow-clear="true"
                  placeholder="请选择接口类型"
                  :show-search="true"
                  code="ONLINE_API_TYPE"
                />
              </s-form-item>
              <s-form-item
                label="接口说明"
                size="custom"
                :options="{ labelWidth: 3, wrapperWidth: 20, offsetWidth: 1, total: 16 }"
                name="description"
                :colon="true"
                :display-title="true"
                :rules="[{ max: 500, message: '最长为500位' }]"
              >
                <s-text-area
                  v-model="formValue.description"
                  :allow-clear="true"
                  placeholder="请输入说明"
                  :row-num="5"
                />
              </s-form-item>
            </a-row>
            <a-row>
              <s-form-item
                label="角色"
                size="small"
                name="roleList"
                :colon="true"
                :display-title="true"
              >
                <s-tree
                  ref="roleList"
                  v-model="formValue.roleList"
                  height="200px"
                  url="/authority/role/selectList"
                  value-field="id"
                  placeholder="角色列表"
                />
              </s-form-item>
              <s-form-item
                label="权限"
                size="small"
                name="permissionList"
                :colon="true"
                :display-title="true"
              >
                <s-tree
                  ref="permissionList"
                  v-model="formValue.permissionList"
                  height="200px"
                  url="/authority/permission/selectList"
                  value-field="id"
                  placeholder="权限列表"
                />
              </s-form-item>
            </a-row>
          </s-scroll>
        </a-tab-pane>

        <a-tab-pane key="1" tab="参数">
          <a-row style="height: 100%">
            <a-col :span="11" style="height: 100%">
              <a-card title="请求参数" style="height: calc(100% - 30px)" size="small">
                <json-viewer v-model="formValue.requestParam" />
              </a-card>
            </a-col>
            <a-col :span="11" style="height: 100%" :offset="1">
              <a-card title="响应参数" style="height: calc(100% - 30px)" size="small">
                <json-viewer v-model="formValue.responseParam" />
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" :force-render="true">
          <template #tab>
            <span>
              SQL
              <a-popover title="扩展参数(ext)">
                <template #content>
                  <s-table
                    style="width: 500px; height: 200px"
                    :pageable="false"
                    :value="[
                      { name: 'id', desc: '系统生成的编号' },
                      { name: 'user.id', desc: '当前用户编号' },
                      { name: 'user.account', desc: '当前用户登录账号' },
                      { name: 'user.orgId', desc: '当前用户归属机构编码' }
                    ]"
                    size="small"
                    bordered
                    :check-enable="false"
                    :scroll="{ y: 200 }"
                    :columns="[
                      { dataIndex: 'name', title: '名称' },
                      { dataIndex: 'desc', title: '说明' }
                    ]"
                  >
                  </s-table>
                </template>
                <s-icon type="question-circle-outlined"></s-icon>
              </a-popover>
            </span>
          </template>
          <a-row style="height: 100%">
            <s-form-item
              size="custom"
              name="sql"
              style="height: 100%"
              :colon="false"
              :options="{ labelWidth: 0, wrapperWidth: 24, offsetWidth: 0, total: 24 }"
              :display-title="false"
              :rules="[{ whitespace: true, required: true, message: 'SQL不能为空' }]"
            >
              <div style="height: calc(100vh - 400px); font-size: 18px">
                <sql-editor ref="sqlEditor" :doc="formValue.sql"> </sql-editor>
              </div>
            </s-form-item>
          </a-row>
        </a-tab-pane>
      </s-tabs>
    </s-form>
  </a-card>
</template>

<script>
import SqlEditor from '@/components/SqlEditor/index.vue'
import JsonViewer from '@/components/JsonViewer/index.vue'
export default {
  name: 'Add',
  components: {
    JsonViewer,
    SqlEditor
  },
  props: {
    dataId: {
      required: true
    }
  },
  data() {
    return {
      formValue: {}
    }
  },
  mounted() {
    this.$loading(true)
    this.$api
      .GET('/onlineApi/selectOneById', { id: this.dataId })
      .then((res) => {
        if (!res.data) {
          this.$loading(false)
          this.$message.warn('数据不存在')
        } else {
          try {
            res.data.requestParam = res.data.requestParam ? JSON.parse(res.data.requestParam) : {}
            res.data.responseParam = res.data.responseParam
              ? JSON.parse(res.data.responseParam)
              : {}
            this.formValue = res.data
            this.$loading(false)
          } catch (e) {
            console.log(e)
          }
        }
      })
      .catch(() => {
        this.$loading(false)
      })
  },
  methods: {
    save() {
      this.formValue.sql = this.$refs.sqlEditor ? this.$refs.sqlEditor.getDoc() : null
      const _this = this
      const form = this.$refs.form
      form.validate((values, fullValue) => {
        this.confirmLoading = true
        values.id = this.formValue.id
        values.requestParam = this.formValue.requestParam
          ? JSON.stringify(this.formValue.requestParam)
          : null
        values.responseParam = this.formValue.responseParam
          ? JSON.stringify(this.formValue.responseParam)
          : null
        this.$loading(true)
        this.$api
          .PUT('/onlineApi/update', values)
          .then((res) => {
            this.$loading(false)
            this.$message.info(res.msg)
          })
          .catch(() => {
            this.$loading(false)
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.property-panel:deep(.ant-tabs-content) {
  height: 100%;
  width: 100%;
}
.property-panel:deep(.ant-tabs-content-holder) {
  height: 100%;
  width: 100%;
  flex-basis: 0;
}
.codemirror {
  ::v-deep(.cm-editor) {
    height: 100%;
    width: calc(100% - 100px);
    font-size: 18px;
  }
}
</style>
